<template>
  <div class="home">
    <!-- 首页头部导航 -->
    <HomeHead />
    <!-- 轮播图 -->
    <div class="swipe-wrapper">
      <van-swipe class="swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          v-for="answer in topAnswer"
          :key="answer.id"
          @click="toDetail(answer.id)"
        >
          <div class="swipe-item">
            <img class="swipe-item-img" :src="answer.image" alt="回答图片" />
            <h1 class="swipe-item-title">
              {{ answer.title }}
            </h1>
            <span class="swipe-item-answer">
              {{ answer.hint }}
            </span>
            <div class="swipe-item-bottom"></div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 回答列表 -->
    <AnswerList :newAnswerList="newAnswerList" />
  </div>
</template>

<script>
import { getLatestNewsAPI, getBeforeAnswerAPI } from '@/api'
import { useRouter } from 'vue-router'
import { getSubtractTime } from '@/utils/time'
import HomeHead from './HomeHead'
import AnswerList from '@/components/AnswerList'
import { onActivated, reactive, toRefs, ref, provide } from 'vue'
export default {
  name: 'Home',
  components: { HomeHead, AnswerList },
  setup() {
    const $router = useRouter()

    let state = reactive({
      today: '', // 日期
      topAnswer: [], // 轮播图
      newAnswerList: [], // 回答列表
    })

    // 加载更多的回答
    const getMoreAnswer = async (num) => {
      const day = getSubtractTime(num)
      const res = await getBeforeAnswerAPI(day)
      const { date, stories } = res.data
      state.newAnswerList.push({
        date,
        stories,
      })
      // 根据时间先后进行排序,防止乱序
      state.newAnswerList.sort((a, b) => {
        return b.date - a.date
      })
    }

    // 跳转到回答详情页面
    const toDetail = (id) => {
      $router.push({
        name: 'detail',
        params: { id },
      })
    }

    // 将事件传给子组件,用于获取更多的回答
    provide('getMoreAnswer', getMoreAnswer)

    onActivated(async () => {
      console.log('home actived')
      // 获取首页轮播
      const res = await getLatestNewsAPI()
      const { date, stories, top_stories } = res.data
      state.topAnswer.push(...top_stories)
      state.newAnswerList.push({
        date,
        stories,
      })
    })

    return {
      ...toRefs(state),
      toDetail,
    }
  },
}
</script>

<style lang='less' scoped>
.swipe-wrapper {
  padding-top: 62px;
  /deep/ .van-swipe__indicators {
    left: 90%;
  }
  /deep/ .van-swipe__indicator--active {
    width: 18px;
    border-radius: 3px;
  }
}
.swipe {
  position: relative;
  height: 250px;
  color: #000;
  font-size: 20px;
  background-color: #39a9ed;
  &-item {
    overflow: hidden;
    &-img {
      width: 100%;
    }
    &-bottom {
      position: absolute;
      top: 170px;
      width: 100%;
      height: 80px;
      background-color: rgba(0, 0, 0, 0.4);
      filter: blur(25px);
      z-index: 1;
    }
    &-title {
      position: absolute;
      top: 170px;
      padding: 0 15px;
      color: #fff;
      text-align: left;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      -webkit-box-orient: vertical;
      z-index: 3;
    }
    &-answer {
      position: absolute;
      bottom: 10px;
      display: block;
      padding: 0 15px;
      font-size: 14px;
      color: #ccc;
      z-index: 3;
    }
  }
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>